<template>
  <div class="app-container jrmx" v-loading="loading" element-loading-text="拼命加载中">
    <div v-if="!DTUList.length" class="duankai_div">
      <img src="../../assets/img/duankai.png" alt="">
      <div>未连接DTU设备</div>
    </div>
    <el-tabs v-model="uuid" @tab-click="handleClick">
      <el-tab-pane v-for="item in DTUList" :key="item.uuid" :label="item.name" :name="item.uuid">
        <div class="content_div">
          <div class="sx_top">
            <span class="top_span2" style="margin-right: 14px">传感器索引号</span>
            <el-select size="mini" v-model="two" clearable filterable style="width: 240px;">
              <el-option v-for="item in newRTUList" :value="item.rtuIndex" :label="item.rtuIndex"
                :key="item.rtuIndex"></el-option>
            </el-select>
            <!-- <el-input
              size="mini"
              style="margin-right: 14px; width: 240px; margin-top: 27px"
              placeholder="传感器名称"
              v-model="two"
              clearable
            />-->
            <span class="top_span2" style="margin-right: 14px;margin-left: 14px;">状态</span>
            <el-select size="mini" v-model="one" clearable style="margin-right: 14px; width: 240px; margin-top: 27px">
              <el-option label="报警" value="2"></el-option>
              <el-option label="预警" value="1"></el-option>
              <el-option label="正常" value="0"></el-option>
            </el-select>
            <!-- <span class="top_span2" style="margin-right: 14px;margin-left: 14px;">连接状态</span> -->
            <!-- <span class="top_span2" style="margin-right: 14px;margin-left: 14px;">设备状态</span>
            <el-select size="mini" v-model="three" clearable style="margin-right: 14px; width: 240px; margin-top: 27px">
              <el-option label="在线" value="1"></el-option>
              <el-option label="断开" value="2"></el-option>
            </el-select> -->
            <el-button size="mini" style="margin-right: 10px; margin-left: 22px" type="primary" @click="handleSearch">查
              询</el-button>
            <el-button size="mini" @click="handleReset">重 置</el-button>
            <span class="tit_span">配置：{{count}}台;</span>
            <span class="tit_span">在线：{{count}}台;</span>
            <span class="tit_span">离线：{{ 60 - count}}台;</span>
            <span class="tit_span">{{count}}/60</span>
          </div>
          <div style="
              box-sizing: border-box;
              padding: 20px;
              background: #fff;
              margin-top: 20px;
            ">
            <div style="margin-bottom: 12px;">
              <!-- <el-button
                style="margin-right: 10px;"
                type="primary"
                :disabled="filterTableData.length == 60"
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
              >新建</el-button>-->
              <el-button icon="el-icon-search" size="mini" @click="handleChakan">多选查看</el-button>
            </div>
            <div class="table_div">
              <el-table row-key="id" ref="multiTable" height="calc(100vh - 340px)" @select-all="handleSelectAll"
                :header-cell-class-name="cellClass" @row-dblclick="handleRowDBClick"
                @selection-change="handleSelectionChange" :data="filterTableData" style="width: 100%"
                :cell-style="{ textAlign: 'center' }" :header-cell-style="{
                  background: 'rgba(250, 250, 250, 1)',
                  textAlign: 'center',
                }">
                <el-table-column v-if="filterTableData.length > 1" type="selection" />
                <el-table-column prop="rtuName" label="传感器名称" width="330">
                  <template slot-scope="scope">
                    {{scope.row.rtuIndex+"："+scope.row.rtuName}}
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="80">
                  <template slot-scope="scope">
                    <span style="color: #F56C6C;" v-if="scope.row.dataStatusText == '报警'">报警</span>
                    <span style="color: #fbcf4e;" v-else-if="scope.row.dataStatusText == '预警'">预警</span>
                    <span v-else style="color: #67C23A;">正常</span>
                  </template>
                </el-table-column>
                <el-table-column prop="currentX" label="实时数据-X" width="120">
                  <template slot-scope="scope">
                    <span
                      :class="[scope.row.dataStatusText == '正常' ? 'color_success' : scope.row.dataStatusText == '预警' ? 'color_warning' : 'color_error']">{{Math.round(scope.row.currentX+scope.row.initialX)}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="currentY" label="实时数据-Y" width="120">
                  <template slot-scope="scope">
                    <span
                      :class="[scope.row.dataStatusText == '正常' ? 'color_success' : scope.row.dataStatusText == '预警' ? 'color_warning' : 'color_error']">{{Math.round(scope.row.currentY+scope.row.initialY)}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="currentZ" label="实时数据-Z" width="120">
                  <template slot-scope="scope">
                    <span
                      :class="[scope.row.dataStatusText == '正常' ? 'color_success' : scope.row.dataStatusText == '预警' ? 'color_warning' : 'color_error']">{{Math.round(scope.row.currentZ+scope.row.initialZ)}}</span>
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="realTime" label="实时数据" width="350px">
                  <template slot-scope="scope">
                    <span :class="[!scope.row.realData ? 'red' : 'green']">{{`X(${scope.row.currentX})
                      Y(${scope.row.currentY}) Z(${scope.row.currentZ})`}}</span>
                  </template>
                </el-table-column> -->
                <el-table-column label="膨胀方向" width="200">
                  <template slot-scope="scope">
                    <span>
                      X：{{scope.row.measuringThreshold.xDirection == 1 ? '正' : '反'}}
                      Y：{{scope.row.measuringThreshold.yDirection == 1 ? '正' : '反'}}
                      Z：{{scope.row.measuringThreshold.zDirection == 1 ? '正' : '反'}}
                    </span>
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="measuringThreshold.warningPositive" label="正向阈值" width="80" />
                <el-table-column prop="measuringThreshold.warningNegative" label="反向阈值" width="80" />
                <el-table-column prop="measuringThreshold.totalRange" label="总量程" width="80" />
                <el-table-column prop="measuringThreshold.thresholdPositive" label="正向量程" width="80" />
                <el-table-column prop="measuringThreshold.thresholdNegative" label="反向量程" width="80" /> -->
                <el-table-column label="正向阈值" width="200">
                  <template slot-scope="scope">
                    <span>
                      X：{{scope.row.measuringThreshold.xDirection == 1?
                      scope.row.measuringThreshold.xWarningPositive:scope.row.measuringThreshold.xThresholdPositive}}
                      Y：{{scope.row.measuringThreshold.yDirection == 1?
                      scope.row.measuringThreshold.yWarningPositive:scope.row.measuringThreshold.yThresholdPositive}}
                      Z：{{scope.row.measuringThreshold.zDirection == 1?
                      scope.row.measuringThreshold.zWarningPositive:scope.row.measuringThreshold.zThresholdPositive}}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="反向阈值" width="200">
                  <template slot-scope="scope">
                    <span>
                      X：{{scope.row.measuringThreshold.xDirection == 1 ? scope.row.measuringThreshold.xThresholdNegative
                      : scope.row.measuringThreshold.xWarningNegative}}
                      Y：{{scope.row.measuringThreshold.yDirection == 1 ? scope.row.measuringThreshold.yThresholdNegative
                      : scope.row.measuringThreshold.yWarningNegative}}
                      Z：{{scope.row.measuringThreshold.zDirection == 1 ? scope.row.measuringThreshold.zThresholdNegative
                      : scope.row.measuringThreshold.zWarningNegative}}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="总量程" width="200">
                  <template slot-scope="scope">
                    <span>
                      X：{{scope.row.measuringThreshold.xDirection == 1 ?(scope.row.measuringThreshold.xThresholdPositive
                      +
                      Math.abs(scope.row.measuringThreshold.xRangeNegative)):(scope.row.measuringThreshold.xRangePositive
                      + Math.abs(scope.row.measuringThreshold.xThresholdNegative))}}
                      Y：{{scope.row.measuringThreshold.yDirection == 1 ?(scope.row.measuringThreshold.yThresholdPositive
                      +
                      Math.abs(scope.row.measuringThreshold.yRangeNegative)):(scope.row.measuringThreshold.yRangePositive
                      + Math.abs(scope.row.measuringThreshold.yThresholdNegative))}}
                      Z：{{scope.row.measuringThreshold.zDirection == 1 ?(scope.row.measuringThreshold.zThresholdPositive
                      +
                      Math.abs(scope.row.measuringThreshold.zRangeNegative)):(scope.row.measuringThreshold.zRangePositive
                      + Math.abs(scope.row.measuringThreshold.zThresholdNegative))}}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="正向量程" width="200">
                  <template slot-scope="scope">
                    <span>
                      X：{{scope.row.measuringThreshold.xDirection == 1
                      ?scope.row.measuringThreshold.xThresholdPositive:scope.row.measuringThreshold.xRangePositive}}
                      Y：{{scope.row.measuringThreshold.yDirection == 1
                      ?scope.row.measuringThreshold.yThresholdPositive:scope.row.measuringThreshold.yRangePositive}}
                      Z：{{scope.row.measuringThreshold.zDirection == 1
                      ?scope.row.measuringThreshold.zThresholdPositive:scope.row.measuringThreshold.zRangePositive}}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="反向量程" width="200">
                  <template slot-scope="scope">
                    <span>
                      X：{{scope.row.measuringThreshold.xDirection ==
                      1?scope.row.measuringThreshold.xRangeNegative:scope.row.measuringThreshold.xThresholdNegative}}
                      Y：{{scope.row.measuringThreshold.yDirection ==
                      1?scope.row.measuringThreshold.yRangeNegative:scope.row.measuringThreshold.yThresholdNegative}}
                      Z：{{scope.row.measuringThreshold.zDirection ==
                      1?scope.row.measuringThreshold.zRangeNegative:scope.row.measuringThreshold.zThresholdNegative}}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column prop="realTime" label="设备状态" width="80">
                  <template slot-scope="scope">
                    <span style="color: #67c23a;">●在线</span>
                  </template>
                </el-table-column>

                <el-table-column prop="rssi" label="信号强度" width="80" />
                <!-- <el-table-column prop="desc" label="备注" width="180" /> -->
                <el-table-column prop="updateTime" label="更新时间" width="200px" :formatter="handleFormatter" />
                <el-table-column label="操作" width="200px" fixed="right">
                  <template slot-scope="scope">
                    <span @click="handleView(scope.row)" style="
                        color: #409eff;
                        margin-left: 10px;
                        cursor: pointer;
                        user-select: none;
                      ">查看</span>
                    <span v-if="editBtnIsShow" @click="handleEdit(scope.row, scope.$index)" style="
                        margin-left: 10px;
                        cursor: pointer;
                        user-select: none;
                      ">编辑</span>
                    <!-- <span
                      @click="handleRemove(scope.$index)"
                      style="
                        color: #F56C6C;
                        margin-left: 10px;
                        cursor: pointer;
                        user-select: none;
                      "
                    >删除</span>-->
                  </template>
                </el-table-column>
              </el-table>
              <div class="fenye_div">
                <!-- <el-pagination background :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50, 60]"
                  :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="filterTableData.length"
                  @size-change="handleSizeChange" @current-change="handleCurrentChange" /> -->
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 3个RTU -->
    <el-drawer :wrapperClosable="false" size="100%" title="详情" :visible.sync="drawerThree" v-loading="loading"
      element-loading-text="拼命加载中" :close-on-press-escape="false">
      <div class="ball_div">
        <ThreeSingle :list="checkBoxEchartList" v-if="drawerThree" :titArr="echartsTitleArr" />
      </div>
    </el-drawer>
    <!-- 2个RTU -->
    <el-drawer :wrapperClosable="false" size="100%" title="详情" :visible.sync="drawer" v-loading="loading"
      element-loading-text="拼命加载中" :close-on-press-escape="false">
      <div class="ball_div">
        <AlarmVisualizationConfiguration :list="checkBoxEchartList" v-if="drawer" :titArr="echartsTitleArr" />
      </div>
    </el-drawer>
    <!-- 1个RTU -->
    <el-drawer :wrapperClosable="false" size="100%" title="详情" :visible.sync="drawerOne" :close-on-press-escape="false">
      <div class="ball_div">
        <!-- <SingleAlarmVisualizationConfiguration v-if="drawerOne" :title="echartsTitle" :list="EchartsList" /> -->
        <SingleAlarmVisualizationConfiguration v-if="drawerOne" />
        <!-- <span>备注：</span>
        <span>阈值正常</span> -->
      </div>
    </el-drawer>
    <el-drawer :wrapperClosable="false" size="40%" :title="infoTitle" :visible.sync="isShow"
      :close-on-press-escape="false">
      <div style="box-sizing: border-box;padding: 20px;overflow-y: scroll;height: 85vh;">
        <!-- :rules="RTURules" -->
        <el-form :model="infoForm" ref="RTUForm" :rules="RTURules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="网关名称">
            <!-- <el-input disabled v-model="infoForm.dtuName" clearable></el-input> -->
            <el-input disabled v-model="DTUList.filter(item => item.uuid == uuid)[0].name" clearable></el-input>
          </el-form-item>
          <el-form-item label="传感器名称">
            <el-input disabled v-model="infoForm.rtuName" clearable></el-input>
          </el-form-item>
          <div style="padding: 20px 0;">
            <el-divider content-position="left">X轴</el-divider>
          </div>
          <el-form-item label="总量程">
            <el-input disabled v-model="xTotalRange" oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')"
              clearable></el-input>
          </el-form-item>
          <el-form-item label="正向量程" prop="xThresholdPositive">
            <el-input v-model="infoForm.xThresholdPositive" clearable></el-input>
          </el-form-item>
          <el-form-item label="反向量程" prop="xThresholdNegative">
            <!-- <el-input v-model="infoForm.xThresholdNegative" @blur="handleChange" clearable></el-input> -->
            <el-input v-model="infoForm.xThresholdNegative" clearable></el-input>
          </el-form-item>
          <el-form-item label="正向阈值" prop="xWarningPositive">
            <el-input v-model="infoForm.xWarningPositive" clearable></el-input>
          </el-form-item>
          <el-form-item label="反向阈值" prop="xWarningNegative">
            <el-input v-model="infoForm.xWarningNegative" clearable></el-input>
          </el-form-item>
          <el-form-item label="膨胀方向" prop="xDirection">
            <el-select v-model="infoForm.xDirection" clearable style="width: 100%;">
              <el-option label="正" value="1"></el-option>
              <el-option label="反" value="0"></el-option>
            </el-select>
          </el-form-item>
          <div style="padding: 20px 0;">
            <el-divider content-position="left">Y轴</el-divider>
          </div>
          <el-form-item label="总量程">
            <el-input disabled v-model="yTotalRange" oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')"
              clearable></el-input>
          </el-form-item>
          <el-form-item label="正向量程" prop="yThresholdPositive">
            <el-input v-model="infoForm.yThresholdPositive" clearable></el-input>
          </el-form-item>
          <el-form-item label="反向量程" prop="yThresholdNegative">
            <el-input v-model="infoForm.yThresholdNegative" @blur="handleChange" clearable></el-input>
          </el-form-item>
          <el-form-item label="正向阈值" prop="yWarningPositive">
            <el-input v-model="infoForm.yWarningPositive" clearable></el-input>
          </el-form-item>
          <el-form-item label="反向阈值" prop="yWarningNegative">
            <el-input v-model="infoForm.yWarningNegative" clearable></el-input>
          </el-form-item>
          <el-form-item label="膨胀方向" prop="yDirection">
            <el-select v-model="infoForm.yDirection" clearable style="width: 100%;">
              <el-option label="正" value="1"></el-option>
              <el-option label="反" value="0"></el-option>
            </el-select>
          </el-form-item>
          <div style="padding: 20px 0;">
            <el-divider content-position="left">Z轴</el-divider>
          </div>
          <el-form-item label="总量程">
            <el-input disabled v-model="zTotalRange" oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')"
              clearable></el-input>
          </el-form-item>
          <el-form-item label="正向量程" prop="zThresholdPositive">
            <el-input v-model="infoForm.zThresholdPositive" clearable></el-input>
          </el-form-item>
          <el-form-item label="反向量程" prop="zThresholdNegative">
            <el-input v-model="infoForm.zThresholdNegative" @blur="handleChange" clearable></el-input>
          </el-form-item>
          <el-form-item label="正向阈值" prop="zWarningPositive">
            <el-input v-model="infoForm.zWarningPositive" clearable></el-input>
          </el-form-item>
          <el-form-item label="反向阈值" prop="zWarningNegative">
            <el-input v-model="infoForm.zWarningNegative" clearable></el-input>
          </el-form-item>
          <el-form-item label="膨胀方向" prop="zDirection">
            <el-select v-model="infoForm.zDirection" clearable style="width: 100%;">
              <el-option label="正" value="1"></el-option>
              <el-option label="反" value="0"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="备注" prop="desc">
            <el-input :rows="5" type="textarea" v-model="infoForm.desc"></el-input>
          </el-form-item> -->
        </el-form>
        <div class="btn">
          <el-button style="width: 120px;margin-left: 20px;" @click="isShow = false">取 消</el-button>
          <el-button type="primary" style="width: 120px;margin-left: 50px;" @click="handleEnter">确 定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import AlarmVisualizationConfiguration from "@/components/AlarmVisualizationConfiguration";
  import SingleAlarmVisualizationConfiguration from "@/components/SingleAlarmVisualizationConfiguration";
  import ThreeSingle from "@/components/ThreeSingle";
  import { realTimeData, dataChartData } from "@/api/data";
  import { getManagerDTUInfo, getManagerDTUOnlineStatus } from "@/api/manager";
  import { setRTUConfigToDevice, getRtuConfig } from "@/api/config";

  export default {
    components: {
      // 1个RTU折线图
      SingleAlarmVisualizationConfiguration,
      // 2个RTU折线图
      AlarmVisualizationConfiguration,
      // 3个RTU折线图
      ThreeSingle
    },
    data() {
      return {
        editBtnIsShow: false,
        newRTUList: [],
        count: 0,
        pageSize: 10,
        rtuIndex: "",
        drawerThree: false,
        list: [],
        checkBoxEchartList: [],
        rtuNameList: [],
        EchartsList: [],
        timer: null,
        uuid: "",
        loading: false,
        multiSelectedGroups: [],
        drawerOne: false,
        echartsTitle: "",
        DTUOnlineList: [],
        DTUList: [],
        echartsTitleArr: [],
        one: null,
        three: "",
        three2: "",
        activeName: "first",
        currentPage: 1,
        isAdd: true,
        index: 0,
        drawer: false,
        title: "详情",
        two: null,
        myTitle: "新增字典值",
        dataList: [],
        filterTableData: [],
        timer2: null,
        infoForm: {},
        isShow: false,
        infoTitle: "编辑",
        // RTU配置校验
        RTURules: {
          // 网关名称
          dtuName: [
            { required: true, message: "请输入网关名称", trigger: "blur" },
            {
              validator: (rule, value, callback) => {
                if (String(value).replace(/[^x00-xFF]/g, '**').length > 32) {
                  callback(new Error("网关名称不能超出硬件存储限度"));
                } else {
                  callback();
                }
              }, trigger: "blur"
            }
          ],
          // 传感器名称
          rtuName: [
            { required: true, message: "请输入传感器名称", trigger: "blur" },
            {
              validator: (rule, value, callback) => {
                if (String(value).replace(/[^x00-xFF]/g, '**').length > 32) {
                  callback(new Error("传感器名称不能超出硬件存储限度"));
                } else {
                  callback();
                }
              }, trigger: "blur"
            }
          ],
          // 正向阈值
          xWarningPositive: [
            { required: true, message: "请输入正向阈值", trigger: "blur" },
            {
              validator: (rule, value, callback) => {
                if (value < 0) {
                  callback(new Error("正向阈值不能小于0"));
                } else if (Number(value) >= Number(this.infoForm.xThresholdPositive)) {
                  callback(new Error("正向阈值不能大于等于正向量程"));
                } else if (!/^\d+$/.test(value)) {
                  callback(new Error("正向阈值不能为小数"));
                } else {
                  callback();
                }
              }, trigger: "blur"
            }
          ],
          yWarningPositive: [
            { required: true, message: "请输入正向阈值", trigger: "blur" },
            {
              validator: (rule, value, callback) => {
                if (value < 0) {
                  callback(new Error("正向阈值不能小于0"));
                } else if (Number(value) >= Number(this.infoForm.yThresholdPositive)) {
                  callback(new Error("正向阈值不能大于等于正向量程"));
                } else if (!/^\d+$/.test(value)) {
                  callback(new Error("正向阈值不能为小数"));
                } else {
                  callback();
                }
              }, trigger: "blur"
            }
          ],
          zWarningPositive: [
            { required: true, message: "请输入正向阈值", trigger: "blur" },
            {
              validator: (rule, value, callback) => {
                if (value < 0) {
                  callback(new Error("正向阈值不能小于0"));
                } else if (Number(value) >= Number(this.infoForm.zThresholdPositive)) {
                  callback(new Error("正向阈值不能大于等于正向量程"));
                } else if (!/^\d+$/.test(value)) {
                  callback(new Error("正向阈值不能为小数"));
                } else {
                  callback();
                }
              }, trigger: "blur"
            }
          ],
          // 反向阈值
          xWarningNegative: [
            { required: true, message: "请输入反向阈值", trigger: "blur" },
            {
              validator: (rule, value, callback) => {
                if (value > 0) {
                  callback(new Error("反向阈值不能大于0"));
                } else if (Number(value) <= Number(this.infoForm.xThresholdNegative)) {
                  callback(new Error("反向阈值不能大于等于反向量程"));
                } else if (!/^\d+$/.test(Math.abs(value))) {
                  callback(new Error("反向阈值不能为小数"));
                } else {
                  callback();
                }
              }, trigger: "blur"
            }
          ],
          yWarningNegative: [
            { required: true, message: "请输入反向阈值", trigger: "blur" },
            {
              validator: (rule, value, callback) => {
                if (value > 0) {
                  callback(new Error("反向阈值不能大于0"));
                } else if (Number(value) <= Number(this.infoForm.yThresholdNegative)) {
                  callback(new Error("反向阈值不能大于等于反向量程"));
                } else if (!/^\d+$/.test(Math.abs(value))) {
                  callback(new Error("反向阈值不能为小数"));
                } else {
                  callback();
                }
              }, trigger: "blur"
            }
          ],
          zWarningNegative: [
            { required: true, message: "请输入反向阈值", trigger: "blur" },
            {
              validator: (rule, value, callback) => {
                if (value > 0) {
                  callback(new Error("反向阈值不能大于0"));
                } else if (Number(value) <= Number(this.infoForm.zThresholdNegative)) {
                  callback(new Error("反向阈值不能大于等于反向量程"));
                } else if (!/^\d+$/.test(Math.abs(value))) {
                  callback(new Error("反向阈值不能为小数"));
                } else {
                  callback();
                }
              }, trigger: "blur"
            }
          ],
          // 正向量程
          xThresholdPositive: [
            { required: true, message: "请输入正向量程", trigger: "blur" },
            {
              validator: (rule, value, callback) => {
                console.log("正反量程之和", value + Math.abs(this.infoForm.xThresholdNegative));
                console.log("总量程", this.infoForm.xTotalRange);
                if (value < 0) {
                  callback(new Error("正向量程不能小于0"));
                } else if (Number(value) < Number(this.infoForm.xWarningPositive)) {
                  callback(new Error("正向量程不能小于正向阈值"));
                } else if (!/^\d+$/.test(value)) {
                  callback(new Error("正向量程不能为小数"));
                } else if (Number(value) + Number(Math.abs(this.infoForm.xThresholdNegative)) > 850) {
                  callback(new Error("总量程不能大于850"));
                } else {
                  callback();
                }
              }, trigger: "blur"
            }
          ],
          yThresholdPositive: [
            { required: true, message: "请输入正向量程", trigger: "blur" },
            {
              validator: (rule, value, callback) => {
                console.log("正反量程之和", value + Math.abs(this.infoForm.yThresholdNegative));
                console.log("总量程", this.infoForm.yTotalRange);
                if (value < 0) {
                  callback(new Error("正向量程不能小于0"));
                } else if (Number(value) < Number(this.infoForm.yWarningPositive)) {
                  callback(new Error("正向量程不能小于正向阈值"));
                } else if (!/^\d+$/.test(value)) {
                  callback(new Error("正向量程不能为小数"));
                } else if (Number(value) + Number(Math.abs(this.infoForm.yThresholdNegative)) > 850) {
                  callback(new Error("总量程不能大于850"));
                } else {
                  callback();
                }
              }, trigger: "blur"
            }
          ],
          zThresholdPositive: [
            { required: true, message: "请输入正向量程", trigger: "blur" },
            {
              validator: (rule, value, callback) => {
                console.log("正反量程之和", value + Math.abs(this.infoForm.zThresholdNegative));
                console.log("总量程", this.infoForm.zTotalRange);
                if (value < 0) {
                  callback(new Error("正向量程不能小于0"));
                } else if (Number(value) < Number(this.infoForm.zWarningPositive)) {
                  callback(new Error("正向量程不能小于正向阈值"));
                } else if (!/^\d+$/.test(value)) {
                  callback(new Error("正向量程不能为小数"));
                } else if (Number(value) + Number(Math.abs(this.infoForm.zThresholdNegative)) > 850) {
                  callback(new Error("总量程不能大于850"));
                } else {
                  callback();
                }
              }, trigger: "blur"
            }
          ],
          // 反向量程
          xThresholdNegative: [
            { required: true, message: "请输入反向量程", trigger: "blur" },
            {
              validator: (rule, value, callback) => {
                if (value > 0) {
                  callback(new Error("反向量程不能大于0"));
                } else if (Number(value) > Math.abs(Number(this.infoForm.xWarningNegative))) {
                  callback(new Error("反向量程不能小于反向阈值"));
                } else if (!/^\d+$/.test(Math.abs(value))) {
                  callback(new Error("反向量程不能为小数"));
                } else if (Number(Math.abs(value)) + Number(this.infoForm.xThresholdPositive) > 850) {
                  callback(new Error("总量程不能大于850"));
                } else {
                  callback();
                }
              }, trigger: "blur"
            }
          ],
          yThresholdNegative: [
            { required: true, message: "请输入反向量程", trigger: "blur" },
            {
              validator: (rule, value, callback) => {
                if (value > 0) {
                  callback(new Error("反向量程不能大于0"));
                } else if (Number(value) > Math.abs(Number(this.infoForm.yWarningNegative))) {
                  callback(new Error("反向量程不能小于反向阈值"));
                } else if (!/^\d+$/.test(Math.abs(value))) {
                  callback(new Error("反向量程不能为小数"));
                } else if (Number(Math.abs(value)) + Number(this.infoForm.yThresholdPositive) > 850) {
                  callback(new Error("总量程不能大于850"));
                } else {
                  callback();
                }
              }, trigger: "blur"
            }
          ],
          zThresholdNegative: [
            { required: true, message: "请输入反向量程", trigger: "blur" },
            {
              validator: (rule, value, callback) => {
                if (value > 0) {
                  callback(new Error("反向量程不能大于0"));
                } else if (Number(value) > Math.abs(Number(this.infoForm.zWarningNegative))) {
                  callback(new Error("反向量程不能小于反向阈值"));
                } else if (!/^\d+$/.test(Math.abs(value))) {
                  callback(new Error("反向量程不能为小数"));
                } else if (Number(Math.abs(value)) + Number(this.infoForm.zThresholdPositive) > 850) {
                  callback(new Error("总量程不能大于850"));
                } else {
                  callback();
                }
              }, trigger: "blur"
            }
          ],
          // 休眠模式
          sleepMode: [
            { required: true, message: "请输入休眠模式", trigger: "blur" },
            {
              validator: (rule, value, callback) => {
                if (value < 0 || value > 4) {
                  callback(new Error("休眠模式不能超过0-4的范围"));
                } {
                  callback();
                }
              },
              trigger: "blur"
            }
          ],
          // 总量程
          // totalRange: [
          //   { required: true, message: "请输入总量程", trigger: "blur" },
          //   {
          //     validator: (rule, value, callback) => {
          //       if (value < 0) {
          //         callback(new Error("总量程不能小于0"));
          //       } else if (Number(value) > 1000) {
          //         callback(new Error("总量程不能大于1000"));
          //       } else if (Number(value) < this.infoForm.warningPositive) {
          //         callback(new Error("总量程不能小于正向阈值"));
          //       } else if (!/^\d+$/.test(value)) {
          //         callback(new Error("总量程不能为小数"));
          //       } else {
          //         callback();
          //       }
          //     },
          //     trigger: "blur"
          //   }
          // ]
        },
      };
    },
    async mounted() {
      if (localStorage.getItem("userType") == "admin" || localStorage.getItem("userType") == "admin_plus") {
        this.editBtnIsShow = true;
      }

      await this.getManagerDTUOnlineStatus();

      this.timer = setInterval(async () => {
        this.$nextTick(async () => {
          await this.realTimeData();
        })
      }, 60000);
    },
    destroyed() {
      clearInterval(this.timer);
      this.timer = null;
    },
    watch: {
      // 单选查看
      drawerOne(val) {
        if (!val) {
          clearInterval(this.timer2);
          this.timer2 = null;
        }
      },
      // 多选查看
      drawer(val) {
        if (!val) {
          this.loading = false;
        }
      },
    },
    computed: {
      xTotalRange() {
        return Number(this.infoForm.xThresholdPositive) + Number(Math.abs(this.infoForm.xThresholdNegative))
      },
      yTotalRange() {
        return Number(this.infoForm.yThresholdPositive) + Number(Math.abs(this.infoForm.yThresholdNegative))
      },
      zTotalRange() {
        return Number(this.infoForm.zThresholdPositive) + Number(Math.abs(this.infoForm.zThresholdNegative))
      },
    },
    methods: {
      cellClass(row) {
        if (row.columnIndex === 0) {
          return 'disabledCheck';
        }
      },
      statusFun(row) {
        const { currentX, currentY, currentZ, measuringThreshold: { warningPositive, warningNegative, thresholdNegative, thresholdPositive } } = row;
        if (currentX > thresholdPositive || currentY > thresholdPositive || currentZ > thresholdPositive) {
          return "报警";
        } else if ((currentX < warningNegative || currentY < warningNegative || currentZ < warningNegative)) {
          return "报警";
        } else if ((currentX < 0 && currentX > warningNegative) || (currentY < 0 && currentY > warningNegative) || (currentZ < 0 && currentZ > warningNegative)) {
          return "预警";
        } else if ((currentX > warningPositive && currentX < thresholdPositive) || (currentY > warningPositive && currentY < thresholdPositive) || (currentZ > warningPositive && currentZ < thresholdPositive)) {
          return "预警";
        } else {
          return "正常";
        }
      },
      // 获取图表数据
      async dataChartData(row) {
        try {
          // this.loading = true;
          const { code, result: { data }, message } = await dataChartData({
            uuid: this.uuid,
            rtuIndex: this.multiSelectedGroups.length > 0 ? this.multiSelectedGroups : [row.rtuIndex],
            startTimeInSecond: Math.floor(Date.now() / 1000) - 86400,
            endTimeInSecond: Math.floor(Date.now() / 1000)
          });
          if (code == 0) {
            this.EchartsList = data[0].detail;
            this.checkBoxEchartList = data;
            this.loading = false;
            // 对应折线图标题和折线图的RTU
            const newList = [];
            this.checkBoxEchartList.forEach(item => {
              newList.push(item.detail[0].rtuName);
            });
            this.echartsTitleArr.sort((firstInfo, secondInfo) => newList.indexOf(firstInfo) - newList.indexOf(secondInfo));

            if (this.multiSelectedGroups.length == 2) {
              this.drawer = true;
            } else if (this.multiSelectedGroups.length == 3) {
              this.drawerThree = true;
            }
            // console.log("获取到的data数据", this.EchartsList);
          }
        } catch (err) {
          console.log("调用接口报错了", err);
        }
      },
      // 更新指定RTU配置
      async setRTUConfigToDevice() {
        try {
          const { xDirection, yDirection, zDirection } = this.infoForm
          const info = {
            uuid: this.infoForm.uuid,
            rtuIndex: this.infoForm.rtuIndex,
            rfChannel: 1,
            sleepMode: 0,
            rtuName: this.infoForm.rtuName,
            reserved: 0,
            // totalRange: Number(this.infoForm.totalRange),
            // thresholdPositive: Number(this.infoForm.thresholdPositive),
            // thresholdNegative: Number(this.infoForm.thresholdNegative),
            // warningPositive: Number(this.infoForm.warningPositive),
            // warningNegative: Number(this.infoForm.warningNegative),
            xDirection: xDirection,
            yDirection: yDirection,
            zDirection: zDirection,

            // xRangePositive: xDirection == 1 ? 0 : this.infoForm.xThresholdPositive,
            // xRangeNegative: xDirection == 1 ? this.infoForm.xThresholdNegative : 0,
            xRangePositive: this.infoForm.xThresholdPositive,
            xRangeNegative: this.infoForm.xThresholdNegative,
            xWarningPositive: xDirection == 1 ? this.infoForm.xWarningPositive : 0.1,
            xWarningNegative: xDirection == 1 ? -0.1 : this.infoForm.xWarningNegative,
            xThresholdPositive: xDirection == 1 ? this.infoForm.xThresholdPositive : this.infoForm.xWarningPositive,
            xThresholdNegative: xDirection == 1 ? this.infoForm.xWarningNegative : this.infoForm.xThresholdNegative,

            // yRangePositive: yDirection == 1 ? 0 : this.infoForm.yThresholdPositive,
            // yRangeNegative: yDirection == 1 ? this.infoForm.yThresholdNegative : 0,
            yRangePositive: this.infoForm.yThresholdPositive,
            yRangeNegative: this.infoForm.yThresholdNegative,
            yWarningPositive: yDirection == 1 ? this.infoForm.yWarningPositive : 0.1,
            yWarningNegative: yDirection == 1 ? -0.1 : this.infoForm.yWarningNegative,
            yThresholdPositive: yDirection == 1 ? this.infoForm.yThresholdPositive : this.infoForm.yWarningPositive,
            yThresholdNegative: yDirection == 1 ? this.infoForm.yWarningNegative : this.infoForm.yThresholdNegative,

            // zRangePositive: zDirection == 1 ? 0 : this.infoForm.zThresholdPositive,
            // zRangeNegative: zDirection == 1 ? this.infoForm.zThresholdNegative : 0,
            zRangePositive: this.infoForm.zThresholdPositive,
            zRangeNegative: this.infoForm.zThresholdNegative,
            zWarningPositive: zDirection == 1 ? this.infoForm.zWarningPositive : 0.1,
            zWarningNegative: zDirection == 1 ? -0.1 : this.infoForm.zWarningNegative,
            zThresholdPositive: zDirection == 1 ? this.infoForm.zThresholdPositive : this.infoForm.zWarningPositive,
            zThresholdNegative: zDirection == 1 ? this.infoForm.zWarningNegative : this.infoForm.zThresholdNegative,
          };

          const { result, message, code } = await setRTUConfigToDevice(info);
          if (code == 0) {
            // await this.getManagerDTUOnlineStatus();
            this.$message.success("修改成功");
            this.isShow = false;
            await this.getManagerDTUOnlineStatus();
            await this.realTimeData();
            await this.getRtuConfig();
          }
        } catch (err) {
          console.log("调用接口报错了修改RTU", err);
        }
      },
      // 获取指定DTU所属全部RTU
      async realTimeData(type = 1) {
        try {
          this.loading = true;
          const { code, result: { data }, message } = await realTimeData({
            dtuUuid: this.uuid,
            rtuOnline: true,
            rtuIndex: this.two,
            dataStatus: this.one
          });
          if (code == 0) {
            // this.dataList = data.filter(item => Date.now() - new Date(item.dataTime).getTime() <= 180000);
            this.dataList = JSON.parse(JSON.stringify(data));
            this.dataList.sort((firstItem, secondItem) => firstItem.rtuIndex - secondItem.rtuIndex);
            if (type == 1) {
              this.count = data.length;
              this.newRTUList = JSON.parse(JSON.stringify(this.dataList));
            }
            this.rtuNameList = this.dataList.map(item => item.rtuName);
            this.filterTableData = JSON.parse(JSON.stringify(this.dataList));
            this.loading = false;
            // data.forEach(item => {
            //   console.log(Date.now() - new Date(item.dataTime).getTime());
            // })
            // this.dataList = data;
            return data;
          }
        } catch (err) {
          console.log("调用接口报错了获取RTU", err);
        }
      },
      // 获取指定DTU指定RTU
      async realTimeIndexRTUData(rtuIndex) {
        try {
          const { code, result: { data }, message } = await realTimeData({
            dtuUuid: this.uuid,
            rtuIndex,
          });
          if (code == 0) {
            return data;
          }
        } catch (err) {
          console.log("调用接口报错了", err);
        }
      },
      // 获取DTU在线状态
      async getManagerDTUOnlineStatus() {
        try {
          this.loading = true;
          const { result, message, code } = await getManagerDTUOnlineStatus();
          if (code == 0) {
            this.DTUOnlineList = result.filter(item => item.online);
            this.uuid = this.DTUOnlineList[0].uuid;
            await this.getManagerDTUInfo();
          }
        } catch (err) {
          this.loading = false;
          console.log("调用接口报错了", err);
        }
      },
      // 获取指定RTU配置
      async getRtuConfig() {
        try {
          const { result, message, code } = await getRtuConfig({
            dtuUuid: this.uuid,
            rtuIndex: this.rtuIndex
          });
          if (code == 0) {
            console.log("result", result);
            // this.infoForm = result;
            this.filterTableData.forEach(item => {
              if (item.rtuIndex == result.rtuIndex) {
                item.measuringThreshold.warningPositive = result.warningPositive;
                item.measuringThreshold.warningNegative = result.warningNegative;
                item.measuringThreshold.totalRange = result.totalRange;
                item.measuringThreshold.thresholdPositive = result.thresholdPositive;
                item.measuringThreshold.thresholdNegative = result.thresholdNegative;
              }
            })
          }
        } catch (err) {
          console.log("调用接口报错了", err);
        }
      },
      // 获取全部DTU信息
      async getManagerDTUInfo() {
        try {
          const { result: { data }, message, code } = await getManagerDTUInfo();
          const list = [];
          if (code == 0) {
            for (let i = 0; i < this.DTUOnlineList.length; i++) {
              const onLineUuid = this.DTUOnlineList[i].uuid;
              for (let j = 0; j < data.length; j++) {
                if (data[j].uuid == onLineUuid) {
                  list.push(data[j]);
                }
              }
            }
            this.DTUList = list;
            this.handleClick();
          }
        } catch (err) {
          console.log("调用接口报错了", err);
        }
      },
      handleFormatter(row) {
        return `${new Date(row.dataTime).getFullYear()}-${new Date(row.dataTime).getMonth() + 1}-${new Date(row.dataTime).getDate()} ${new Date(row.dataTime).getHours()}:${new Date(row.dataTime).getMinutes() < 10 ? "0" + new Date(row.dataTime).getMinutes() : new Date(row.dataTime).getMinutes()}`;
      },
      // 全选
      handleSelectAll() {
        const idx = this.DTUList.findIndex(item => item.uuid == this.uuid);
        this.$refs.multiTable[idx].clearSelection();
      },
      // 查看
      handleChakan() {
        if (this.echartsTitleArr.length == 0) {
          this.$message("请选择");
          return;
        }
        if (this.echartsTitleArr.length == 1) {
          this.$message("双击当前行，即可查看");
          return;
        }
        localStorage.setItem("rtuIndexList", JSON.stringify(this.multiSelectedGroups));
        localStorage.setItem("uuid", JSON.stringify(this.uuid));
        // this.loading = true;
        if (this.multiSelectedGroups.length == 2) {
          this.drawer = true;
        } else if (this.multiSelectedGroups.length == 3) {
          this.drawerThree = true;
        }

        // this.dataChartData();
      },
      // 回调表格选择的数据 当选择项发生变化时会触发该事件
      handleSelectionChange(list) {
        if (list.length > 3) {
          this.limitFn(list);
          return;
        }
        this.multiSelectedGroups = list.map(item => item.rtuIndex);
        this.echartsTitleArr = list.map(item => item.rtuName);

        // this.$nextTick(() => {
        //   if (list.length > 3) {
        //     this.limitFn(list);
        //   } else {
        //     this.multiSelectedGroups = list.map(item => item.rtuIndex);
        //     this.echartsTitleArr = list.map(item => item.rtuName);
        //   }
        // });
      },
      // 限制数量方法
      limitFn(list) {
        this.$nextTick(() => {
          const idx = this.DTUList.findIndex(item => item.uuid == this.uuid);
          this.$refs.multiTable[idx].clearSelection(); //用于多选表格，清空用户的选择
          for (let i = 0; i < 3; i++) {
            this.$refs.multiTable[idx].toggleRowSelection(list[i]); //用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
          }
        });
      },
      handleView(row) {
        localStorage.setItem("rtuIndexList", JSON.stringify(row.rtuIndex));
        localStorage.setItem("uuid", JSON.stringify(row.uuid));
        this.drawerOne = true;
        // this.echartsTitle = row.rtuName;
        // this.timer2 = setInterval(() => {
        //   this.dataChartData(row);
        // }, 60000);
        // this.dataChartData(row);
      },
      handleChange() {
        this.infoForm.forwardRange =
          Number(this.infoForm.totalRange) + Number(this.infoForm.reverseRange);
      },
      handleClick() {
        this.two = "";
        this.currentPage = 1;
        // this.pageSize = 10;

        // if (this.activeName == "first") {
        //   const info = {
        //     dtuUuid: 1,
        //   };
        //   this.realTimeData(info);
        // } else {
        //   const info = {
        //     dtuUuid: 2,
        //   };
        // }
        this.realTimeData();
      },
      handleSizeChange(pageSize) {
        this.pageSize = pageSize;
        console.log("当前每页条数", pageSize);
      },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage;
      },
      handleEnter() {
        this.$refs.RTUForm.validate(valid => {
          if (valid) {
            this.setRTUConfigToDevice();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      async handleEdit(row, idx) {
        this.rtuIndex = row.rtuIndex;
        this.isAdd = false;
        this.index = idx;
        this.infoTitle = "编辑";
        const data = await this.realTimeIndexRTUData(row.rtuIndex);
        const indexRTUInfo = data[0];
        const { measuringThreshold: cc } = indexRTUInfo
        const { xDirection, yDirection, zDirection } = cc
        this.infoForm = {
          uuid: indexRTUInfo.uuid,
          rtuIndex: indexRTUInfo.rtuIndex,
          // dtuName: this.DTUList.filter(item => item.uuid == this.uuid)[0].name,
          rtuName: indexRTUInfo.rtuName,
          // X轴
          // xTotalRange: indexRTUInfo.measuringThreshold.xThresholdPositive +
          //   Math.abs(indexRTUInfo.measuringThreshold.xThresholdNegative),
          xThresholdPositive: xDirection == 1 ? cc.xThresholdPositive : cc.xRangePositive,
          xThresholdNegative: xDirection == 1 ? cc.xRangeNegative : cc.xThresholdNegative,
          xWarningPositive: xDirection == 1 ? cc.xWarningPositive : cc.xThresholdPositive,
          xWarningNegative: xDirection == 1 ? cc.xThresholdNegative : cc.xWarningNegative,
          // xRangePositive: xDirection == 1 ? cc.xThresholdPositive : cc.xRangePositive,
          xDirection: xDirection + "",
          // Y轴
          // yTotalRange: indexRTUInfo.measuringThreshold.yThresholdPositive +
          //   Math.abs(indexRTUInfo.measuringThreshold.yThresholdNegative),
          yThresholdPositive: yDirection == 1 ? cc.yThresholdPositive : cc.yRangePositive,
          yThresholdNegative: yDirection == 1 ? cc.yRangeNegative : cc.yThresholdNegative,
          yWarningPositive: yDirection == 1 ? cc.yWarningPositive : cc.yThresholdPositive,
          yWarningNegative: yDirection == 1 ? cc.yThresholdNegative : cc.yWarningNegative,
          yDirection: yDirection + "",
          // Z轴
          // zTotalRange: indexRTUInfo.measuringThreshold.zThresholdPositive +
          //   Math.abs(indexRTUInfo.measuringThreshold.zThresholdNegative),
          zThresholdPositive: zDirection == 1 ? cc.zThresholdPositive : cc.zRangePositive,
          zThresholdNegative: zDirection == 1 ? cc.zRangeNegative : cc.zThresholdNegative,
          zWarningPositive: zDirection == 1 ? cc.zWarningPositive : cc.zThresholdPositive,
          zWarningNegative: zDirection == 1 ? cc.zThresholdNegative : cc.zWarningNegative,
          zDirection: zDirection + "",
        };

        this.isShow = true;
      },
      handleRowDBClick(row) {
        localStorage.setItem("rtuIndexList", JSON.stringify(row.rtuIndex));
        localStorage.setItem("uuid", JSON.stringify(row.uuid));
        this.drawerOne = true;
        // this.timer2 = setInterval(() => {
        //   this.dataChartData(row);
        // }, 60000);
        // this.dataChartData(row);
      },
      loadEcharts() {
        this.$nextTick(() => {
          this.initEcharts();
        });
      },
      handleChangeGLName() {
        if (this.one != this.two) {
          this.two = "";
        }
      },
      handleSearch() {
        console.log("dataList", this.dataList);
        console.log("one", this.one);
        // 搜索传感器名称
        // if (this.two != "") {
        //   this.filterTableData = this.dataList.filter(item => item.rtuIndex == this.two);
        // }
        if (!this.two && !this.one) {
          this.$message("请选择限制条件");
        }
        console.log("筛选后的值", this.filterTableData);
        this.realTimeData(2);
        // 搜索报警状态
        // if (this.one != "") {
        //   if (this.two.length == 0) {
        //     this.filterTableData = this.dataList.filter(item => this.statusFun(item) == this.one);
        //   } else {
        //     this.filterTableData = this.filterTableData.filter(item => this.statusFun(item) == this.one);
        //   }
        // }
        // // 搜索在线状态
        // if (this.three == 2) {//断开
        //   this.filterTableData = [];
        // } else {//在线
        //   console.log("筛选在线", this.one.length, this.two.length);
        //   if (this.one.length == 0 && this.two.length == 0) {
        //     console.log("走进来了");
        //     this.filterTableData = this.dataList;
        //   }
        // }
      },
      async handleReset() {
        // this.one = this.two = this.three = "";
        // this.filterTableData = this.dataList;
        this.one = null;
        this.two = null;
        await this.realTimeData();
      },
      handleRemove(idx) {
        this.$confirm("数据删除后将不可恢复，是否继续此操作？", "删除确认", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$delete(this.filterTableData, idx);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    }
  };
</script>

<style lang="scss">
  .jrmx {
    .el-table__fixed-right {
      height: calc(100vh - 356px) !important;
    }

    /* 取消表格全选勾选给框 */
    .el-table__header-wrapper .el-checkbox {
      display: none !important;
    }

    :focus {
      outline: 0 !important;
    }

    .fenye_div {
      margin-top: 30px;
      text-align: right;
    }

    .table_div {
      height: calc(100vh - 250px);
    }

    .tit_span {
      margin-left: 20px;
      font-weight: 400;
      font-size: 14px;
      color: #909399;
    }

    .top_span2 {
      /** 文本1 */
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
    }

    .sx_top {
      height: 80px;
      background-color: #fff;
      box-sizing: border-box;
      padding: 0 0 29px 19px;
    }

    .el-tabs__nav-scroll {
      background-color: #fff;
      padding-left: 34px;
    }

    .content_div {
      height: calc(100vh - 150px);
    }

    .el-tabs__nav-wrap::after {
      background-color: transparent !important;
    }

    .color_success {
      color: #67C23A;
    }

    .color_error {
      color: #F56C6C;
    }

    .color_warning {
      color: #fbcf4e;
    }
  }

  /* .el-table .disabledCheck .cell .el-checkbox__inner {
    display: none;
  }

  .el-table .disabledCheck .cell::before {
    content: '';
    text-align: center;
    line-height: 37px;
  } */



  .el-drawer__header>:first-child {
    border: none !important;
  }

  .el-dialog__body {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .btn {
    display: flex;
    justify-content: center;
    margin-top: 140px;
  }

  .ball_div {
    box-sizing: border-box;
    padding: 20px;
    padding-top: 0;
    overflow-y: scroll;
    height: calc(100vh - 77px);
  }

  .red {
    color: #f56c6c;
  }

  .green {
    color: #67c23a;
  }

  .el-table td.gutter,
  .el-table th.gutter {
    background-color: rgb(250, 250, 250) !important;
  }

  .el-table__fixed-right-patch {
    background-color: rgb(250, 250, 250) !important;
  }

  .duankai_div {
    width: 230px;
    height: 110px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

    &>div {
      margin-top: 20px;
      color: #a3afcc;
    }
  }
</style>